<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>打地鼠游戏</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            touch-action: manipulation;
            min-height: 100vh;
        }

        h1 {
            color: #333;
            margin-bottom: 10px;
            text-align: center;
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            width: 500px;
            max-width: 90%;
            margin-bottom: 20px;
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .info-item {
            text-align: center;
            flex: 1;
        }

        .info-label {
            font-weight: bold;
            color: #555;
        }

        .info-value {
            font-size: 24px;
            color: #333;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 20px;
            width: 500px;
            max-width: 90%;
        }

        .hole {
            width: 150px;
            height: 150px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;
            background-color: #795548;
            cursor: pointer;
            transition: transform 0.1s;
        }

        .hole:hover {
            transform: scale(1.05);
        }

        @media (max-width: 600px) {
            .hole {
                width: 100px;
                height: 100px;
            }
        }

        .hole::after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: 20px;
            width: 110px;
            height: 60px;
            background-color: #5D4037;
            border-radius: 50%;
        }

        .mole {
            width: 90%;
            height: 90px;
            position: absolute;
            bottom: -90px;
            left: 5%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="25" fill="%23795548"/><circle cx="40" cy="25" r="5" fill="%23FFF"/><circle cx="60" cy="25" r="5" fill="%23FFF"/><circle cx="40" cy="25" r="2" fill="%23000"/><circle cx="60" cy="25" r="2" fill="%23000"/><circle cx="40" cy="40" r="5" fill="%23FF9999"/><circle cx="60" cy="40" r="5" fill="%23FF9999"/><path d="M45 45 Q50 50 55 45" stroke="%23000" stroke-width="2" fill="none"/><ellipse cx="50" cy="70" rx="20" ry="25" fill="%23795548"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center bottom;
            transition: bottom 0.3s;
            filter: drop-shadow(0 0 5px rgba(255, 255, 0, 0.5));
        }

        .mole.up {
            bottom: 15px;
        }

        .mole.hit {
            animation: hitEffect 0.3s forwards, shake 0.2s;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="25" fill="%23D32F2F"/><circle cx="40" cy="25" r="5" fill="%23FFF"/><circle cx="60" cy="25" r="5" fill="%23FFF"/><circle cx="40" cy="25" r="2" fill="%23000"/><circle cx="60" cy="25" r="2" fill="%23000"/><circle cx="40" cy="40" r="5" fill="%23FF9999"/><circle cx="60" cy="40" r="5" fill="%23FF9999"/><path d="M45 45 Q50 50 55 45" stroke="%23000" stroke-width="2" fill="none"/><ellipse cx="50" cy="70" rx="20" ry="25" fill="%23D32F2F"/></svg>');
        }

        @keyframes hitEffect {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(0.8);
                opacity: 0.7;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(5px);
            }
        }

        .sparkle {
            position: absolute;
            width: 10px;
            height: 10px;
            background: radial-gradient(circle, yellow, transparent);
            border-radius: 50%;
            animation: sparkleFade 0.5s forwards;
            pointer-events: none;
        }

        @keyframes sparkleFade {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        .controls {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
            justify-content: center;
            width: 500px;
            max-width: 90%;
        }

        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
            flex: 1;
            min-width: 120px;
        }

        button:hover {
            background-color: #388E3C;
        }

        button:disabled {
            background-color: #CCCCCC;
            cursor: not-allowed;
        }

        .difficulty-selector {
            margin-bottom: 20px;
            width: 500px;
            max-width: 90%;
        }

        .difficulty-title {
            margin-bottom: 10px;
            color: #555;
            text-align: center;
        }

        .difficulty-options {
            display: flex;
            justify-content: space-between;
        }

        .difficulty-option {
            flex: 1;
            padding: 10px;
            text-align: center;
            background-color: #fff;
            border-radius: 4px;
            cursor: pointer;
            border: 2px solid #ddd;
            transition: all 0.3s;
        }

        .difficulty-option.selected {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }

        .history {
            margin-top: 20px;
            margin-bottom: 20px;
            width: 500px;
            max-width: 90%;
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .history-title {
            margin-top: 0;
            color: #555;
        }

        .history-list {
            list-style-type: none;
            padding: 0;
            max-height: 200px;
            overflow-y: auto;
        }

        .history-item {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
        }

        .history-item:last-child {
            border-bottom: none;
        }

        .music-control {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>
    <h1>打地鼠游戏</h1>

    <div class="difficulty-selector">
        <div class="difficulty-title">选择难度</div>
        <div class="difficulty-options">
            <div class="difficulty-option selected" data-difficulty="1">简单</div>
            <div class="difficulty-option" data-difficulty="2">中等</div>
            <div class="difficulty-option" data-difficulty="3">困难</div>
        </div>
    </div>

    <div class="game-info">
        <div class="info-item">
            <div class="info-label">分数</div>
            <div class="info-value" id="score">0</div>
        </div>
        <div class="info-item">
            <div class="info-label">时间</div>
            <div class="info-value" id="time">30</div>
        </div>
        <div class="info-item">
            <div class="info-label">最高分</div>
            <div class="info-value" id="high-score">0</div>
        </div>
    </div>

    <div class="game-board" id="game-board"></div>

    <div class="controls">
        <button id="start-btn">开始游戏</button>
        <button id="reset-btn" disabled>重新开始</button>
    </div>

    <div class="history">
        <h3 class="history-title">历史记录</h3>
        <ul class="history-list" id="history-list"></ul>
    </div>

    <div class="music-control" id="music-control">🎵</div>

    <audio id="bg-music" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
        <!-- 替换为你的背景音乐文件 -->
    </audio>

    <audio id="hit-sound">
        <source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3" type="audio/mpeg">
        <!-- 替换为你的击中音效文件 -->
    </audio>

    <audio id="ready-go">
        <source
            src="https://ia600709.us.archive.org/21/items/451271-alivvie-ready-set-go/451271__alivvie__ready-set-go.wav"
            type="audio/mpeg">
        <!-- Replace with your Ready, Go! sound file -->
    </audio>

    <noscript>
        <style>
            body {
                display: none !important;
            }
        </style>
        <meta http-equiv="refresh" content="0; url=about:blank">
    </noscript>
    <script src="security.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Game configuration
            const config = {
                holesCount: 9,
                initialTime: 30,
                timeIncrease: 5,
                scorePerHit: 10,
                penaltyPerMiss: -2,
                moleUpTime: [800, 1200],
                moleDownTime: 2000,
                difficultyIncrease: 5,
                maxDifficulty: 3,
                currentDifficulty: 1
            };

            // DOM elements
            const elements = {
                gameBoard: document.getElementById('game-board'),
                scoreDisplay: document.getElementById('score'),
                timeDisplay: document.getElementById('time'),
                highScoreDisplay: document.getElementById('high-score'),
                startBtn: document.getElementById('start-btn'),
                resetBtn: document.getElementById('reset-btn'),
                historyList: document.getElementById('history-list'),
                difficultyOptions: document.querySelectorAll('.difficulty-option'),
                musicControl: document.getElementById('music-control'),
                bgMusic: document.getElementById('bg-music'),
                hitSound: document.getElementById('hit-sound'),
                readyGo: document.getElementById('ready-go')
            };

            // Game state
            const gameState = {
                score: 0,
                timeLeft: config.initialTime,
                isPlaying: false,
                gameInterval: null,
                moleInterval: null,
                difficulty: 1,
                lastHitTime: 0,
                moles: [],
                musicOn: true
            };

            // Initialize game
            function initGame() {
                elements.gameBoard.innerHTML = '';
                gameState.moles = [];

                for (let i = 0; i < config.holesCount; i++) {
                    const hole = document.createElement('div');
                    hole.className = 'hole';
                    hole.dataset.index = i;

                    const mole = document.createElement('div');
                    mole.className = 'mole';
                    mole.dataset.index = i;

                    hole.appendChild(mole);
                    elements.gameBoard.appendChild(hole);

                    mole.addEventListener('click', function () {
                        if (gameState.isPlaying) {
                            hitMole(parseInt(this.dataset.index));
                        }
                    });

                    mole.addEventListener('touchstart', function (e) {
                        e.preventDefault();
                        if (gameState.isPlaying) {
                            hitMole(parseInt(this.dataset.index));
                        }
                    }, { passive: false });

                    gameState.moles.push({
                        element: mole,
                        isActive: false,
                        hole: hole
                    });
                }

                loadHighScore();
                loadHistory();
                setDifficulty(config.currentDifficulty);
            }

            // Set difficulty
            function setDifficulty(difficulty) {
                config.currentDifficulty = difficulty;
                elements.difficultyOptions.forEach(option => {
                    option.classList.toggle('selected', parseInt(option.dataset.difficulty) === difficulty);
                });

                switch (difficulty) {
                    case 1:
                        config.moleUpTime = [1000, 1500];
                        config.initialTime = 45;
                        break;
                    case 2:
                        config.moleUpTime = [800, 1200];
                        config.initialTime = 30;
                        break;
                    case 3:
                        config.moleUpTime = [500, 1000];
                        config.initialTime = 20;
                        break;
                }
            }

            // Start game
            function startGame() {
                if (gameState.isPlaying) return;

                gameState.isPlaying = true;
                gameState.score = 0;
                gameState.timeLeft = config.initialTime;
                gameState.difficulty = config.currentDifficulty;
                gameState.lastHitTime = Date.now();

                elements.scoreDisplay.textContent = gameState.score;
                elements.timeDisplay.textContent = gameState.timeLeft;
                elements.startBtn.disabled = true;
                elements.resetBtn.disabled = false;

                updateAllMoles();

                if (gameState.musicOn) {
                    elements.readyGo.currentTime = 0;
                    // 设置背景音乐音量
                    elements.bgMusic.volume = 0.3;

                    // 先播放准备音效
                    elements.readyGo.play().catch(e => console.log("Ready, Go! sound requires user interaction"));

                    // 准备音效结束后播放背景音乐
                    elements.readyGo.onended = function () {
                        elements.bgMusic.play().catch(e => console.log("Background music requires user interaction"));
                    };
                }

                clearInterval(gameState.gameInterval);
                gameState.gameInterval = setInterval(updateGame, 1000);

                clearInterval(gameState.moleInterval);
                gameState.moleInterval = setInterval(popUpRandomMole, 800 / gameState.difficulty);
            }

            // Update game state
            function updateGame() {
                gameState.timeLeft--;
                elements.timeDisplay.textContent = gameState.timeLeft;

                if (gameState.timeLeft <= 0) {
                    endGame();
                }

                const timeElapsed = config.initialTime - gameState.timeLeft;
                if (timeElapsed > 0 && timeElapsed % config.difficultyIncrease === 0 && gameState.difficulty < config.maxDifficulty) {
                    gameState.difficulty++;
                    clearInterval(gameState.moleInterval);
                    gameState.moleInterval = setInterval(popUpRandomMole, 800 / gameState.difficulty);
                }
            }

            // Pop up random mole
            function popUpRandomMole() {
                if (!gameState.isPlaying) return;

                const randomIndex = Math.floor(Math.random() * config.holesCount);
                const mole = gameState.moles[randomIndex];

                if (mole.isActive) return;

                mole.element.classList.add('up');
                mole.isActive = true;

                const upTime = config.moleUpTime[0] + Math.random() * (config.moleUpTime[1] - config.moleUpTime[0]);
                setTimeout(() => {
                    if (gameState.isPlaying && mole.isActive) {
                        mole.element.classList.remove('up');
                        mole.isActive = false;
                    }
                }, upTime);
            }

            // Hit mole
            function hitMole(index) {
                const mole = gameState.moles[index];

                if (!mole.isActive) return;

                if (gameState.musicOn) {
                    elements.hitSound.currentTime = 0;
                    elements.hitSound.play().catch(e => console.log("Hit sound requires user interaction"));
                }

                gameState.score += config.scorePerHit;
                elements.scoreDisplay.textContent = gameState.score;

                mole.element.classList.add('hit');
                mole.isActive = false;

                // Add sparkle effect
                for (let i = 0; i < 5; i++) {
                    const sparkle = document.createElement('div');
                    sparkle.className = 'sparkle';
                    sparkle.style.left = `${50 + Math.random() * 50 - 25}px`;
                    sparkle.style.top = `${20 + Math.random() * 50 - 25}px`;
                    mole.hole.appendChild(sparkle);
                    setTimeout(() => sparkle.remove(), 500);
                }

                if (gameState.score > getHighScore()) {
                    saveHighScore(gameState.score);
                }

                setTimeout(() => {
                    mole.element.classList.remove('up', 'hit');
                }, 200);

                gameState.lastHitTime = Date.now();
            }

            // Update all moles
            function updateAllMoles() {
                gameState.moles.forEach(mole => {
                    mole.element.classList.remove('up');
                    mole.isActive = false;
                });
            }

            // End game
            function endGame() {
                gameState.isPlaying = false;
                clearInterval(gameState.gameInterval);
                clearInterval(gameState.moleInterval);

                updateAllMoles();

                elements.startBtn.disabled = false;
                elements.resetBtn.disabled = true;

                if (gameState.musicOn) {
                    elements.bgMusic.pause();
                    elements.bgMusic.currentTime = 0;
                }

                saveGameHistory();
            }

            // Reset game
            function resetGame() {
                console.log('重置游戏 - 当前音乐状态:', gameState.musicOn);

                // 强制停止所有音频
                elements.bgMusic.pause();
                elements.bgMusic.currentTime = 0;
                elements.readyGo.pause();
                elements.readyGo.currentTime = 0;
                elements.hitSound.pause();
                elements.hitSound.currentTime = 0;

                // 结束当前游戏(如果有)
                if (gameState.isPlaying) {
                    endGame();
                }

                // 重置游戏状态但不自动播放音乐
                gameState.isPlaying = false;
                gameState.score = 0;
                gameState.timeLeft = config.initialTime;
                elements.scoreDisplay.textContent = gameState.score;
                elements.timeDisplay.textContent = gameState.timeLeft;
                elements.startBtn.disabled = false;
                elements.resetBtn.disabled = true;

                // 重新初始化游戏
                initGame();
            }

            // Load high score
            function loadHighScore() {
                const highScore = localStorage.getItem('whackAMoleHighScore') || 0;
                elements.highScoreDisplay.textContent = highScore;
            }

            // Save high score
            function saveHighScore(score) {
                const currentHighScore = getHighScore();
                if (score > currentHighScore) {
                    localStorage.setItem('whackAMoleHighScore', score);
                    elements.highScoreDisplay.textContent = score;
                }
            }

            // Get high score
            function getHighScore() {
                return parseInt(localStorage.getItem('whackAMoleHighScore')) || 0;
            }

            // Save game history
            function saveGameHistory() {
                const history = JSON.parse(localStorage.getItem('whackAMoleHistory') || '[]');
                const newRecord = {
                    score: gameState.score,
                    time: new Date().toLocaleString()
                };

                history.push(newRecord);
                history.sort((a, b) => b.score - a.score);
                if (history.length > 10) {
                    history.length = 10;
                }

                localStorage.setItem('whackAMoleHistory', JSON.stringify(history));
                loadHistory();
            }

            // Load history
            function loadHistory() {
                const history = JSON.parse(localStorage.getItem('whackAMoleHistory') || '[]');
                elements.historyList.innerHTML = '';

                if (history.length === 0) {
                    const li = document.createElement('li');
                    li.textContent = '暂无历史记录';
                    li.style.textAlign = 'center';
                    li.style.color = '#999';
                    elements.historyList.appendChild(li);
                    return;
                }

                history.forEach(record => {
                    const li = document.createElement('li');
                    li.className = 'history-item';

                    const dateSpan = document.createElement('span');
                    dateSpan.textContent = record.time;

                    const scoreSpan = document.createElement('span');
                    scoreSpan.textContent = record.score;
                    if (record.score === gameState.score) {
                        scoreSpan.style.fontWeight = 'bold';
                        scoreSpan.style.color = '#4CAF50';
                    }

                    li.appendChild(dateSpan);
                    li.appendChild(scoreSpan);
                    elements.historyList.appendChild(li);
                });
            }

            // Toggle music
            function toggleMusic() {
                gameState.musicOn = !gameState.musicOn;

                if (gameState.musicOn) {
                    elements.musicControl.textContent = '🎵';
                    if (gameState.isPlaying) {
                        elements.bgMusic.play().catch(e => console.log("Background music requires user interaction"));
                    }
                } else {
                    elements.musicControl.textContent = '🔇';
                    elements.bgMusic.pause();
                    elements.bgMusic.currentTime = 0;
                }
            }

            // Event listeners
            elements.startBtn.addEventListener('click', startGame);
            elements.resetBtn.addEventListener('click', resetGame);
            elements.musicControl.addEventListener('click', toggleMusic);

            elements.difficultyOptions.forEach(option => {
                option.addEventListener('click', function () {
                    const difficulty = parseInt(this.dataset.difficulty);
                    setDifficulty(difficulty);
                });
            });

            // Initialize game
            initGame();
        });
    </script>
</body>

</html>